<template>
  <div>
    <van-nav-bar
      fixed
      left-arrow
      :border="false"
      title="管理下级"
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top">
      <div class="mg-24">
        <a v-for="(item,index) in linkList" :key="index" :href="item.link" class="item flex-s-c">
          <div>
            <p class="title">{{ item.title }}</p>
            <p class="text color-gray-light">{{ item.text }}</p>
          </div>
          <div class="right-arrow" />
        </a>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {

  },

  data() {
    return {
      linkList: [
        {
          title: '代理列表',
          text: '查看我的下级代理列表',
          link: '/m/user/myteam'
        },
        {
          title: '代理审核',
          text: '管理申请的下级代理',
          link: '/m/user/MicroMerchantCheckList'
        },
        {
          title: '调级审核',
          text: '管理申请调级的下级代理',
          link: '/m/user/UpgradeCheckList'
        },
        {
          title: '下级订单',
          text: '处理下级代理的订单',
          link: '/m/user/TeamOrder'
        }

      ]
    }
  },
  computed: {

  },
  created() {

  },
  activated() {},
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.item{
  display: flex;
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  &:not(:last-child){
    margin-bottom: 24px;
  }
  .title{
    font-size: 32px;
  }
  .text{
    margin-top: 16px;
  }
  .right-arrow{
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: 20px;
    border-radius: 16px;
    background: #F1F1F1;
    position: relative;
    &:after{
      content: '';
      width: 8px;
      height: 8px;
      border: 2px solid;
      border-color: #999 #999 transparent transparent;
      position: absolute;
      top: 10px;
      left: 8px;
      transform: rotate(45deg);
    }
  }
}
</style>
